<mat-card *ngIf="zoneDefinition">

  <mat-card-content fxFlexAlign="space-between center" fxLayout="row">

    <div fxFlex="5" fxLayout="row" fxLayoutAlign="center center">
      Z{{zoneId + 1}}
    </div>

    <span fxFlex="5"></span>

    <!--FROM FIELD-->
    <div [ngSwitch]="isFirstZone" fxFlex="40"> <!-- FIRST ZONE ??? -->
      <mat-form-field *ngSwitchCase="true" fxFlex="(zoneDefinition.customDisplay ? 35 : 75)">
        <!-- IS FIRST ZONE -->
        <input
          (change)="onZoneChange({from: true, to: false})"
          (keydown)="onFilterKeys($event)"
          [(ngModel)]="zone.from"
          (blur)="zonesService.updateZones()"
          matInput
          matTooltip="Use arrows &#8645; to set {{zoneDefinition.units}} value."
          max="{{zone.to}}"
          min="{{zoneDefinition.min}}"
          placeholder="From {{zoneDefinition.units}}"
          step="{{zoneDefinition.step}}"
          type="number"
        />
      </mat-form-field>
      <mat-form-field *ngSwitchCase="false" fxFlex="(zoneDefinition.customDisplay ? 35 : 75)">
        <!-- IS NOT FIRST ZONE -->
        <input
          (change)="onZoneChange({from: true, to: false})"
          (keydown)="onFilterKeys($event)"
          [(ngModel)]="zone.from"
          (blur)="zonesService.updateZones()"
          matInput
          matTooltip="Use arrows &#8645; to set {{zoneDefinition.units}} value."
          max="{{zone.to}}"
          min="{{prevZoneFrom}}"
          placeholder="From {{zoneDefinition.units}}"
          step="{{zoneDefinition.step}}"
          type="number"
        />
      </mat-form-field>
      <span *ngIf="zoneDefinition.customDisplay" fxFlex="15"></span>
      <mat-form-field *ngIf="zoneDefinition.customDisplay" fxFlex="40">
        <input
          [disabled]="true"
          [value]="zoneDefinition.customDisplay.output(zone.from)"
          matInput/>
      </mat-form-field>
    </div>
    <span fxFlex="5"></span>

    <!--TO FIELD-->
    <div [ngSwitch]="isLastZone" fxFlex="40"> <!-- FIRST ZONE ??? -->
      <mat-form-field *ngSwitchCase="true" fxFlex="(zoneDefinition.customDisplay ? 35 : 75)">
        <!-- IS LAST ZONE -->
        <input
          (change)="onZoneChange({from: false, to: true})"
          (keydown)="onFilterKeys($event)"
          [(ngModel)]="zone.to"
          (blur)="zonesService.updateZones()"
          matInput
          matTooltip="Use arrows &#8645; to set {{zoneDefinition.units}} value."
          max="{{zoneDefinition.max}}"
          min="{{zone.from}}"
          placeholder="To {{zoneDefinition.units}}"
          step="{{zoneDefinition.step}}"
          type="number"
        />
      </mat-form-field>
      <mat-form-field *ngSwitchCase="false" fxFlex="(zoneDefinition.customDisplay ? 35 : 75)">
        <!-- IS NOT LAST ZONE -->
        <input
          (change)="onZoneChange({from: false, to: true})"
          (keydown)="onFilterKeys($event)"
          [(ngModel)]="zone.to"
          (blur)="zonesService.updateZones()"
          matInput
          matTooltip="Use arrows &#8645; to set {{zoneDefinition.units}} value."
          max="{{nextZoneTo}}"
          min="{{zone.from}}"
          placeholder="To {{zoneDefinition.units}}"
          step="{{zoneDefinition.step}}"
          type="number"
        />
      </mat-form-field>
      <span *ngIf="zoneDefinition.customDisplay" fxFlex="15"></span>
      <mat-form-field *ngIf="zoneDefinition.customDisplay" fxFlex="45">
        <input
          [disabled]="true"
          [value]="zoneDefinition.customDisplay.output(zone.to)"
          matInput/>
      </mat-form-field>
    </div>

    <span fxFlex="5"></span>

    <div fxFlex="5" fxLayout="row" fxLayoutAlign="center center">
      <button (click)="onRemoveZoneAtIndex(zoneId)" mat-icon-button>
        <mat-icon fontSet="material-icons-outlined">close</mat-icon>
      </button>
    </div>

  </mat-card-content>

</mat-card>
